<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td{
            width: 100px;
            height: 30px;
            border: 1px solid red;
        }
        table{
            margin: 0 auto;
            border-collapse: collapse;
        }
        button{
            background-color: lightblue;
            width: 100px;
            height: 30px;
            color: white;
            margin-top: 20px;
        } 
    </style>
    <script>
        window.onload=function(){
            var tbody=document.getElementsByTagName('tbody')[0];
            var trs=document.getElementsByTagName('tr');
            var btns=document.getElementsByTagName('button');
            var inputs=document.getElementsByTagName('input');
            //鼠标移入当前行添加颜色
            tbody.onmouseover=function(event){
                //console.log(event.target);
                if(event.target.nodeName=='TD'){
                var tr=event.target.parentNode;
                tr.style.backgroundColor='pink';
                }else if(event.target.nodeName=='INPUT'){
                    var tr=event.target.parentNode.parentNode;
                    tr.style.backgroundColor='pink';
                }
            }
            //鼠标移出去掉颜色
            tbody.onmouseout=function(event){
                //console.log(event.target);
                var tr=event.target.parentNode;
                tr.style.backgroundColor='';
            }
            //绑定按钮添加行
            btns[0].onclick=function(){
                var newTr=document.createElement('tr');
                var newInput=document.createElement('input');
                
                var key=newInput.setAttribute("type",'checkbox');
                
                
                for(var i=0;i<4;i++){
                    var newTd=document.createElement('td');
                    newTr.appendChild(newTd);
                    if(i==0){
                        newTd.appendChild(newInput);
                    }

                    
                }
                    
                    tbody.appendChild(newTr);
            }
            //删除选中行
            
            btns[1].onclick=function(){

                Array.prototype.slice.call(inputs).forEach(function(item,index,arr){
                    if(item.checked){
                        if(confirm("是否确认删除？")){
                            tbody.removeChild(item.parentNode.parentNode);
                        }
                    }
                })
            }



        }




    </script>
</head>
<body>
    <table>
		<tbody>
			<tr>
				<td><input type="checkbox"></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td></td>
				<td></td>
				<td></td>
            </tr>
            <tr>
				<td><input type="checkbox"></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>

	<div>
		<button>添加</button>
		<button>删除</button>
	</div>
</body>
</html>